<template>
  <div class="footer">
    <h1>我是Footer</h1>
    <!-- <p>Count的值是{{ this.$store.state.count }}</p> -->
    <p>Count的值是{{ count }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Footer",
  mounted() {
    //Vuex给vue实例添加了一个$store属性 属性内有vuex的功能属性
    // console.log(this);
    // console.log(this.$store);
    // console.log(this.$store.state.count);
    //这样拿不方便 计算属性拿好
    //计算属性拿 也不舒服 mapState 更爽
    //mapState是一个函数
    // console.log(mapState);
    //函数要求参数是一个数组或者一个对象
    //调用函数可以得到由函数组成的对象
    //其函数相当于 返回一个计算属性函数
    //     count() {
    //   return this.$store.state.count;
    // },
    // console.log(mapState({count:"count"}));
    // console.log(mapState(["count"]));
    //  "TypeError: Cannot read properties of undefined (reading 'state')"
    //它的this有问题 通过call修改this 最后可以拿到值
    // console.log(mapState(["count"]).count.call(this))
  },
  computed: {
    //展开对象 得到许多计算属性函数
    ...mapState("count",["count"])
  },
};
</script>

<style scoped>
.footer {
  margin: 30px;
  background: palevioletred;
}
</style>